<%--
  页面声明部分：
  - contentType 设置页面内容类型为HTML，字符编码为UTF-8
  - language 指定使用的脚本语言为Java
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN"> <%-- 设置页面语言为简体中文 --%>
<head>
    <%-- 元数据部分 --%>
    <meta charset="UTF-8"> <%-- 设置字符编码为UTF-8 --%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <%-- 响应式视口设置 --%>
    <title>登录页面</title> <%-- 页面标题 --%>

    <%-- 引入Bootstrap 5 CSS样式表 --%>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
          crossorigin="anonymous">

    <%-- 页面内嵌CSS样式 --%>
    <style>
        /* 页面整体样式 */
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh; /* 使页面至少占满整个视口高度 */
            margin: 0;
            background: linear-gradient(to bottom right, #007bff, #00bfff); /* 蓝色渐变背景 */
        }

        /* 登录卡片样式 */
        .login-card {
            width: 100%; /* 响应式宽度 */
            max-width: 400px; /* 最大宽度限制 */
            background-color: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
            border-radius: 15px; /* 圆角边框 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            padding: 30px; /* 内边距 */
        }
    </style>
</head>
<body>
<%-- 登录卡片容器 --%>
<div class="login-card">
    <h2 class="text-center mb-4">登录</h2> <%-- 标题，居中，下边距 --%>

    <%-- 登录表单，提交到"login"处理器，使用POST方法 --%>
    <form action="login" method="post">
        <%-- 用户名输入组 --%>
        <div class="mb-3"> <%-- 下边距 --%>
            <label for="username" class="form-label">账号</label>
            <input type="text" class="form-control" id="username" name="username"
                   placeholder="请输入账号" required> <%-- 必填字段 --%>
        </div>

        <%-- 密码输入组 --%>
        <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input type="password" class="form-control" id="password" name="password"
                   placeholder="请输入密码" required> <%-- 必填字段 --%>
        </div>

        <%-- 登录按钮 --%>
        <div class="d-grid gap-2"> <%-- 网格布局，按钮间有间隙 --%>
            <button type="submit" class="btn btn-primary">登录</button>
        </div>

        <%-- 辅助链接 --%>
        <div class="text-center mt-3"> <%-- 文本居中，上边距 --%>
            <a href="ForgetPsw.jsp">忘记密码</a> |
            <a href="Register.jsp">注册</a>
        </div>
    </form>
</div>

<%-- 引入Bootstrap 5 JS脚本 --%>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
        crossorigin="anonymous"></script>
</body>
</html>